{%extends "base.html"%}
{%block title%}
团队列表
{%endblock%}
{%block body%}
<script>
    let team;
    $(document).ready(() => {
        //这个东西不在vue里
        $("#add-team-button").click(() => {
            $.post("/api/team/create").done(ctx => {
                ctx = JSON.parse(ctx);
                if (ctx.code) {
                    showErrorModal(ctx.message);
                    return;
                }
                window.location.href = "/team/" + ctx.team_id;
            });
        })
        team = new Vue({
            delimiters: ['{[', ']}'],
            el: "#teams",
            data: {
                data: null,
                done: false,
            }
        });



        $.post("/api/team/list", ).done(ctx => {
            ctx = JSON.parse(ctx);
            if (ctx.code) {
                show_modal_error(ctx.message);
                return;
            }
            team.data = ctx.data;

            team.done = true;
        });
    });
</script>

<div class="ui header" style="margin-bottom: 50px;">
    <h1>团队</h1>
</div>
<div class="ui stacked segment">
    <div class="ui right aligned container" id="add-team-button">
        <div class="ui green icon button">
            <i class="ui plus icon"></i>添加团队..
        </div>
    </div>
    <div id="teams" v-if="done">
        <div class="ui divider"></div>
        <table class="ui very basic table">
            <thead>
                <tr>
                    <th class="center aligned" style="max-width: 80px;width:80px;">团队ID</th>
                    <th>团队名</th>
                    <th>创建者</th>
                    <th>人数</th>

                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data">
                    <td class="center aligned" style="max-width: 80px;width:80px;">{[item.id]}</td>
                    <td style="min-width: 400px;"><a :href="'/team/'+item.id">{[item.name]}</a> </td>
                    <td><a :href="'/profile/'+item.owner_id">{[item.owner_username]}</a> </td>
                    <td>{[item.member_count]}</td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

{%endblock%}